<template>
    <div class="container">
        <!-- 搜索区域 -->
        <Card>
            <div class="search-list">
                <div class="search-item">
                    <div class="item-text">客户电话</div>
                    <div class="item-input">
                        <Input
                            clearable
                            v-model="queryForm.telephone"
                            placeholder="客户电话"
                        />
                    </div>
                </div>
                <div class="search-item">
                    <div class="item-text">商机名称</div>
                    <div class="item-input">
                        <Input
                            clearable
                            v-model="queryForm.name"
                            placeholder="商机名称"
                        />
                    </div>
                </div>
                <div class="search-item">
                    <div class="item-text">业态</div>
                    <div class="item-input">
                        <Input
                            clearable
                            v-model="queryForm.format"
                            placeholder="业态"
                        />
                    </div>
                </div>
                <div class="search-item">
                    <div class="item-text">操作：</div>
                    <div class="item-input">
                        <Button type="primary" @click="searchList">查询</Button>
                    </div>
                </div>
            </div>
        </Card>
        <Card>
            <!-- 列表 -->
            <div class="business-list">
                <div
                class="business-item"
                v-for="(item, index) in customerArry"
                :key="item.id"
                >
                    <div class="item">
                        <div class="item-text">商机Id</div>
                        <div class="item-message">{{ item.businessId }}</div>
                    </div>
                    <div class="item">
                        <div class="item-text">商机名称</div>
                        <div class="item-message">{{ item.businessName }}</div>
                    </div>
                    <div class="item">
                        <div class="item-text">客户电话</div>
                        <div class="item-message">{{ item.contactTelephone }}</div>
                    </div>
                    <div class="item">
                        <div class="item-text">性别</div>
                        <div class="item-message">{{ item.customerGender==1? '男':'女' }}</div>
                    </div>
                    <div class="item">
                        <div class="item-text">年龄</div>
                        <div class="item-message" v-if="item.customerAge==1">(18-35岁)</div>
                        <div class="item-message" v-if="item.customerAge==2">(35-50岁)</div>
                        <div class="item-message" v-if="item.customerAge==3">(65岁以上)</div>
                    </div>
                    <div class="item">
                        <div class="item-text">业态</div>
                        <div class="item-message">{{ item.businessFormat==''? '/': item.businessFormat }}</div>
                    </div>
                    <div class="item">
                        <div class="item-text">客户居住地址</div>
                        <div class="item-message">{{item.locationAreaProvinceName}}-{{item.locationAreaCityName}}-{{item.locationAreaName}}</div>
                    </div>
                    <div class="item">
                        <div class="item-text">客户角色</div>
                        <div class="item-message" v-if="item.customerRole==1">老板</div>
                        <div class="item-message" v-if="item.customerRole==2">投资人</div>
                        <div class="item-message" v-if="item.customerRole==3">合伙人</div>
                        <div class="item-message" v-if="item.customerRole==4">开发人员</div>
                        <div class="item-message" v-if="item.customerRole==5">员工</div>
                        <div class="item-message" v-if="item.customerRole=='' || item.customerRole==null">/</div>
                    </div>
                    <div class="item">
                        <div class="item-text">店铺类型</div>
                        <div class="item-message" v-if="item.storeType==1">加盟</div>
                        <div class="item-message" v-if="item.storeType==2">自创</div>
                        <div class="item-message" v-if="item.storeType==3">连锁</div>
                        <div class="item-message" v-if="item.storeType=='' || item.storeType==null">/</div>
                    </div>
                    <div class="item">
                        <div class="item-text">品牌名称</div>
                        <div class="item-message" v-if="item.brandName==''|| item.brandName==null">/</div>
                        <div class="item-message" v-else>{{item.brandName}}</div>
                    </div>
                    <div class="item">
                        <div class="item-text">对城市熟悉度</div>
                        <div class="item-message" v-if="item.cityFamiliarity==1">陌生</div>
                        <div class="item-message" v-if="item.cityFamiliarity==2">大致了解</div>
                        <div class="item-message" v-if="item.cityFamiliarity==3">非常熟悉</div>
                        <div class="item-message" v-if="item.cityFamiliarity=='' || item.cityFamiliarity==null">/</div>
                    </div>
                    <div class="item">
                        <div class="item-text">开店经验</div>
                        <div class="item-message" v-if="item.shopExperience==1">新手</div>
                        <div class="item-message" v-if="item.shopExperience==2">老手</div>
                        <div class="item-message" v-if="item.shopExperience=='' || item.shopExperience==null">/</div>
                    </div>
                    <div class="item">
                        <div class="item-text">投资预算</div>
                        <div class="item-message" v-if="item.investmentBudget=='' || item.investmentBudget==null">/</div>
                        <div class="item-message" v-else>{{item.investmentBudget}}</div>
                    </div>
                    <div class="item">
                        <div class="item-text">客户籍贯</div>
                        <div class="item-message" v-if="item.customerHometownArea=='' || item.customerHometownArea==null">/</div>
                        <div class="item-message" v-else>{{item.customerHometownArea}}</div>
                    </div>
                    <div class="item">
                        <div class="item-text">跟进人</div>
                        <div class="item-message">{{item.dataCreatorNickName}}</div>
                    </div>
                </div>
            </div>
        </Card>
        <!-- 分页 -->
        <Page :total="total" @on-change="changeNumber1" />
    </div>
</template>
<script>
import {customerList} from "../../api/customer"
export default {
    data(){
        return{
            //查询条件
			queryForm: {
				pageNumber: 1,
				pageSize: 5,
				name: '',
				telephone: '',
				format: ''
			},
            // 总条数
            total:0,
            pages:null,
            current:1,
            // 资源库数据
            customerArry:[]
        }
    },
    created(){
        this.loadData()
    },
    methods:{
        // 初始数据
        loadData(){
            customerList(this.queryForm).then(res=>{
                console.log(res)
                this.customerArry=res.records
                this.total=res.total
            })
        },
        // 查询资源库
        searchList(){
            this.loadData()
        },
        // 更换页码
        changeNumber1(num) {
            console.log(num);
            this.queryForm.pageNumber = num;
            this.loadData();
        },
    }
}
</script>
<style lang="less" scoped>
// 条件筛选区域
.search-item {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  font-size: 0.28rem;
  .item-text {
    width: 1.5rem;
    font-weight: 600;
  }
  .item-input {
    display: flex;
    flex-direction: column;
    button {
      margin: 0.15rem 0;
    }
  }
}
/deep/.ivu-card-body {
  padding: 0;
}
.business-item:last-child{
  margin-bottom:0;
}
.business-item {
  background-color: #ccc;
  margin-bottom: 0.15rem;
  padding: 0.2rem;
  font-size: 0.28rem;
  border-radius: 5px;
  .item:last-child {
    border-bottom: none;
  }
  .item {
    display: flex;
    margin: 0.15rem;
    align-items: center;
    border-bottom: 1px solid #fff;
    padding: 0.15rem 0;
    .item-text {
      width: 2.2rem;
      font-weight: 600;
    }
  }
}
.item-message {
  flex: 1;
  button {
    margin:0.2rem;
  }
  .message {
    margin: 0.1rem 0;
  }
}

// 分页
.ivu-page {
  display: flex;
  justify-content: center;
  padding: 0.2rem;
}
.ivu-card-bordered {
  margin-bottom: 0.3rem;
}
</style>